<template>
  <div class="box">
    <van-sticky>
      <van-tabs
        v-model="active"
        swipeable
        line-width="95px"
        title-active-color="#5C97F6"
        color="#4EB5FF"
        @click="showTab"
      >
        <van-tab :title="D_name+'排名'">
          <van-sticky :offset-top="44">
            <van-dropdown-menu>
              <van-dropdown-item
                title="事件类型"
                ref="integral_event_d"
              >
                <div
                  class="clearfix"
                  style="height:238px;overflow-y:scroll;"
                >
                  <ul
                    class="left integral_oneEvent"
                    style="margin-right:4px"
                  >
                    <van-radio-group v-model="radio_event_D">
                      <li
                        v-for="(ip,ip_id) in integral_event_one"
                        :key="ip_id"
                        class="integral_one_children"
                      >
                        <div>{{ip.name}} <div class="right integral_childre_one">
                            <van-radio
                              :name="ip_id+1"
                              shape="square"
                              @click="show_click_one_event(ip)"
                            ></van-radio>
                          </div>
                        </div>
                      </li>
                    </van-radio-group>
                  </ul>
                  <ul
                    class="left integral_oneEvent"
                    style="margin-right:4px"
                  >
                    <van-checkbox-group v-model="result_event_two">
                      <li
                        v-for="(ip,ip_i_n) in integral_event_two.event"
                        :key="ip_i_n"
                        class="integral_one_children"
                        style="background-color:#FAFAFA"
                      >
                        <div>{{ip.name}} <div class="right integral_children_right">
                            <van-checkbox
                              :name="ip.name"
                              shape="square"
                              @click="show_click_two_event(ip)"
                            ></van-checkbox>
                          </div>
                        </div>

                      </li>
                    </van-checkbox-group>
                  </ul>
                  <ul class="left integral_oneEvent">
                    <van-checkbox-group v-model="result_event_three">
                      <li
                        v-for="(ip,ip_i) in integral_event_three"
                        :key="ip_i"
                        class="integral_one_children"
                        style="background-color:#FAFAFA"
                      >
                        <div>{{ip.name}} <div class="right integral_children_right">
                            <van-checkbox
                              :name="ip.name"
                              shape="square"
                              @click="show_click_three_event(ip)"
                            ></van-checkbox>
                          </div>
                        </div>
                      </li>
                    </van-checkbox-group>
                  </ul>
                </div>
                <div style="position:aabsoluteb;bottom:0px;">
                  <van-button
                    class="public_reset"
                    @click="integral_confirm"
                  >取消</van-button>
                  <van-button
                    class="public_confirm"
                    @click="onConfirm"
                  >确认</van-button>
                </div>

              </van-dropdown-item>
              <van-dropdown-item
                title="时间"
                ref="D_item"
              >
                <van-radio-group
                  v-model="radio_stage"
                  style="width:25vw;overflow: hidden;display: inline-block;float: left;"
                >
                  <ul class="left rangking_condition">
                    <li>
                      <van-radio
                        :name="0"
                        shape="square"
                      >月度排名</van-radio>
                    </li>
                    <li>
                      <van-radio
                        :name="1"
                        shape="square"
                      >阶段排名</van-radio>
                    </li>
                    <li>
                      <van-radio
                        :name="2"
                        shape="square"
                        @click="show_cumulative"
                      >累计排名</van-radio>
                    </li>
                  </ul>
                </van-radio-group>
                <ul
                  class="left rangking_condition_date"
                  v-if='radio_stage==0'
                  style="width:75vw;float:left"
                >
                  <li>
                    <van-datetime-picker
                      v-model="currentDate"
                      type="year-month"
                      :min-date="minDate"
                      :max-date="maxDate"
                      @confirm='show_time'
                      @cancel="show_cancel"
                    />
                  </li>
                </ul>
                <ul
                  class="left rangking_condition1_date"
                  v-if='radio_stage==1'
                  style="width:75vw;float:left"
                >
                  <li>
                    <div
                      class="clearfix"
                      style="display:flex;justify-content:center"
                    >
                      <span
                        :class="show_active==1?'van-cell-group':'van-cell-show'"
                        @click="show_start_value"
                      >{{start_value}}</span>
                      <span
                        :class="show_active==0?'van-cell-group':'van-cell-show'"
                        @click="show_end_value"
                      >{{end_value}}</span>
                    </div>
                    <van-datetime-picker
                      v-model="currentDate"
                      type="date"
                      :min-date="minDate"
                      :max-date="maxDate"
                      @confirm='show_time_section'
                      @cancel="show_cancel"
                      @change="show_section_value"
                    />
                  </li>
                </ul>
              </van-dropdown-item>
              <van-dropdown-item
                title="部门"
                ref="depart_D"
                close-on-click-outside
              >
                <van-radio-group
                  style="height:45vh;overflow:scroll;padding:5px 10px 15px"
                  v-model="radio_D"
                >
                  <div>
                    <div class="rangking_list">
                      积分排名
                    </div>
                    <div
                      class="cell"
                      v-for="(item,i) in ranking_list.dept"
                      :key="i"
                    >
                      <van-radio
                        v-if="item.groupType!=3&&item.groupType!=2"
                        icon-size="24px"
                        :name="i"
                        @click="show_office(item)"
                      ><span>{{item.groupName}}</span>
                      </van-radio>
                    </div>
                  </div>
                  <div>
                    <div class="rangking_list">
                      部门排名
                    </div>
                    <div
                      class="cell"
                      v-for="(item,i) in ranking_list.dept"
                      :key="i"
                    >
                      <van-radio
                        v-if="item.groupType==3"
                        icon-size="24px"
                        :name="i"
                        @click="show_office(item)"
                      ><span>{{item.groupName}}</span>
                      </van-radio>
                    </div>
                  </div>
                  <div>
                    <div class="rangking_list">
                      自定义部门排名
                    </div>
                    <div
                      class="cell"
                      v-for="(item,i) in ranking_list.dept"
                      :key="i"
                      @click="show_office_free(item)"
                    >
                      <van-radio
                        v-if="item.groupType==2"
                        icon-size="24px"
                        :name="i"
                      ><span>{{item.groupName}}</span>
                      </van-radio>
                    </div>
                  </div>

                </van-radio-group>
              </van-dropdown-item>
              <van-dropdown-item
                title="更多"
                ref="item"
              >
                <div style="margin-top:10px"> <i style="font-style:normal;font-size:12px;">期待与您共创</i></div>

              </van-dropdown-item>
            </van-dropdown-menu>
          </van-sticky>
        </van-tab>
        <van-tab
          v-if="ISC == 1"
          :title="C_name+'排名'"
        >
          <van-sticky :offset-top="44">
            <van-dropdown-menu>
              <van-dropdown-item
                title="事件类型"
                ref="integral_event_c"
              >
                <div
                  class="clearfix"
                  style="height:238px;overflow-y:scroll;"
                >
                  <ul
                    class="left integral_oneEvent"
                    style="margin-right:4px"
                  >
                    <van-radio-group v-model="radio_event_C">
                      <li
                        v-for="(ip_c,ip_id) in integral_event_one"
                        :key="ip_id+'info--'"
                        class="integral_one_children"
                      >
                        <div>{{ip_c.name}} <div class="right integral_childre_one">
                            <van-radio
                              :name="ip_id+1"
                              shape="square"
                              @click="show_click_one_event(ip_c)"
                            ></van-radio>
                          </div>
                        </div>
                      </li>
                    </van-radio-group>
                  </ul>
                  <ul
                    class="left integral_oneEvent"
                    style="margin-right:4px"
                  >
                    <van-checkbox-group v-model="result_event_two">
                      <li
                        v-for="(ip_c,ip_i_n) in integral_event_two.event"
                        :key="ip_i_n+'j--'"
                        class="integral_one_children"
                        style="background-color:#FAFAFA"
                      >
                        <div>{{ip_c.name}} <div class="right integral_children_right">
                            <van-checkbox
                              :name="ip_c.name"
                              shape="square"
                              @click="show_click_two_event(ip_c)"
                            ></van-checkbox>
                          </div>
                        </div>

                      </li>
                    </van-checkbox-group>
                  </ul>
                  <ul class="left integral_oneEvent">
                    <van-checkbox-group v-model="result_event_three">
                      <li
                        v-for="(ip_c,ip_i) in integral_event_three"
                        :key="ip_i+'i--'"
                        class="integral_one_children"
                        style="background-color:#FAFAFA"
                      >
                        <div>{{ip_c.name}} <div class="right integral_children_right">
                            <van-checkbox
                              :name="ip_c.name"
                              shape="square"
                              @click="show_click_three_event(ip_c)"
                            ></van-checkbox>
                          </div>
                        </div>
                      </li>
                    </van-checkbox-group>
                  </ul>
                </div>
                <div style="position:aabsoluteb;bottom:0px;">
                  <van-button
                    class="public_reset"
                    @click="integral_confirm"
                  >取消</van-button>
                  <van-button
                    class="public_confirm"
                    @click="onConfirm"
                  >确认</van-button>
                </div>

              </van-dropdown-item>
              <van-dropdown-item
                title="时间"
                ref="rangking_date_c"
              >
                <van-datetime-picker
                  v-model="currentDate"
                  type="year-month"
                  :min-date="minDate"
                  :max-date="maxDate"
                  @confirm='show_time'
                  @cancel="show_cancel"
                />
              </van-dropdown-item>
              <van-dropdown-item
                title="部门"
                ref="depart_D"
                close-on-click-outside
              >
                <van-radio-group
                  style="height:45vh;overflow:scroll;padding:5px 10px 15px"
                  v-model="radio_C"
                >
                  <!-- <div> -->
                  <div>
                    <div class="rangking_list">
                      积分排名
                    </div>
                    <div
                      class="cell"
                      v-for="(item_c,i_c) in ranking_list.dept"
                      :key="i_c"
                    >
                      <van-radio
                        v-if="item_c.groupType!=3&&item_c.groupType!=2"
                        icon-size="24px"
                        :name="i_c"
                        @click="show_office(item_c)"
                      ><span>{{item_c.groupName}}</span>
                      </van-radio>
                    </div>
                  </div>
                  <div>
                    <div class="rangking_list">
                      部门排名
                    </div>
                    <div
                      class="cell"
                      v-for="(item_c,i_c) in ranking_list.dept"
                      :key="i_c+'in++'"
                    >
                      <van-radio
                        v-if="item_c.groupType==3"
                        icon-size="24px"
                        :name="i_c"
                        @click="show_office(item_c)"
                      ><span>{{item_c.groupName}}</span>
                      </van-radio>
                    </div>
                  </div>
                </van-radio-group>
              </van-dropdown-item>
              <van-dropdown-item
                title="更多"
                ref="item"
              >
                <div style="margin-top:10px"> <i style="font-style:normal;font-size:12px;">期待与您共创</i></div>

              </van-dropdown-item>
            </van-dropdown-menu>
          </van-sticky>
        </van-tab>
        <van-tab title="绩效">

        </van-tab>
      </van-tabs>
    </van-sticky>
    <!-- 点赞效果图 -->
    <van-overlay
      :show="show_dianzan"
      @click="show_dianzan = false"
    >
      <div
        class="wrapper"
        @click.stop
      >
        <div
          class="dianzan_round"
          style="border:1px solid #5c97f6;width:100px;height:100px;border-radius:50%;line-height:100px"
        >
          <div
            class="dianzan_round"
            style="border:5px solid #5c97f6;width:80px;height:80px;border-radius:50%;margin: 5px auto;line-height:94px"
          >
            <img
              class="dianzan_rotate"
              src="../static/img/点赞.png"
            >
          </div>
        </div>
      </div>
    </van-overlay>
    <div v-if="achievements==0">
      <!-- 自定义部门排名 -->
      <div v-if="free_list_id==1">
        <div class="rangking_list">
          自定义部门排名
        </div>
        <div
          class="clearfix"
          v-for="(item_free,i) in free_list"
          :key="i"
        >
          <div
            class="clearfix free_public"
            v-if="i==0"
          >
            <span
              class="left"
              style="margin-right:16px;"
            ><img
                style="width:3px;"
                src="@/static/section/ranking/dengjilan@2x.png"
              >
            </span>
            <span
              class="left"
              style="margin-left:5px;"
            ><img
                style="width:22px;margin-top:11px"
                src="@/static/section/ranking/jintrophy_icon@2x.png"
              >
            </span>
            <span
              class="item_title left"
              v-if="item_free.name.length<3"
            >{{((item_free.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="item_title left"
              v-else-if="item_free.name.length>=3"
            > {{((item_free.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
            <span class="left"> {{item_free.name}}
            </span>
            <span class="right">
              {{item_free.Average}}(总分：{{item_free.Totalscore}})
            </span>
          </div>
          <div
            class="clearfix free_public"
            v-else-if="i==1"
          >
            <span
              class="left"
              style="margin-right:16px;"
            ><img
                style="width:3px;"
                src="@/static/section/ranking/dengjilan@2x.png"
              ></span>
            <span
              class="left"
              style="margin-left:5px;"
            ><img
                style="width:22px;margin-top:11px"
                src="@/static/section/ranking/yintrophy_icon@2x.png"
              >
            </span>
            <span
              class="item_title left"
              v-if="item_free.name.length<3"
            >{{((item_free.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="item_title left"
              v-else-if="item_free.name.length>=3"
            > {{((item_free.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
            <span class="left"> {{item_free.name}}
            </span>
            <span class="right">
              {{item_free.Average}}(总分：{{item_free.Totalscore}})
            </span>
          </div>
          <div
            class="clearfix free_public"
            v-else-if="i==2"
          >
            <span
              class="left"
              style="margin-right:16px;"
            ><img
                style="width:3px;"
                src="@/static/section/ranking/dengjilan@2x.png"
              ></span>
            <span
              class="left"
              style="margin-left:5px;"
            ><img
                style="width:22px;margin-top:11px"
                src="@/static/section/ranking/tongtrophy_icon@2x.png"
              >
            </span>
            <span
              class="item_title left"
              v-if="item_free.name.length<3"
            >{{((item_free.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="item_title left"
              v-else-if="item_free.name.length>=3"
            > {{((item_free.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
            <span class="left"> {{item_free.name}}
            </span>
            <span class="right">
              {{item_free.Average}}(总分：{{item_free.Totalscore}})
            </span>
          </div>
          <div
            class="clearfix ranking_list"
            v-else
          >

            <span
              class="left"
              style="margin-right:16px;"
            ><img
                style="width:3px;"
                src="@/static/section/ranking/dengjilan@2x.png"
              ></span>
            <span
              class="left"
              style="margin-left:5px;"
            ><i>{{item_free.deep}}</i>
            </span>
            <span
              class="item_title left"
              v-if="item_free.name.length<3"
            >{{((item_free.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="item_title left"
              v-else-if="item_free.name.length>=3"
            > {{((item_free.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
            <span class="left"> {{item_free.name}}
            </span>
            <span class="right">
              {{item_free.Average}}(总分：{{item_free.Totalscore}})
            </span>
          </div>
        </div>
      </div>

      <!-- 部门排名 -->
      <div v-else>
        <van-pull-refresh
          v-model="isLoading"
          success-text="刷新成功"
          @refresh="onRefresh"
        >
          <div class="rangking_list">
            排名详情
          </div>
          <van-row
            type="flex"
            justify="center"
            align="bottom"
            v-show="text_length"
          >
            <van-col span="6">
              <div
                class="rank_box"
                v-if="ranking_yin.length!=0"
                style="position:relative"
              >
                <span style="position:absolute;top:0px;right:0px"><img
                    style="width:15px;height:15px"
                    src="@/static/section/ranking/dengjilan x@2x.png"
                  ></span>
                <div class="ranking_yin">
                  <i
                    style="font-style: normal;margin-left: 2vw"
                    v-if="ranking_yin.name.length<3"
                  >{{((ranking_yin.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</i>
                  <i
                    style="font-style: normal;margin-left: 2vw"
                    v-else-if="ranking_yin.name.length>=3"
                  > {{((ranking_yin.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</i>
                </div>
                <div style="margin:10px 0px;width:100%; display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ranking_yin.name}}({{ranking_yin.dingding_office_id}})</div>
                <div style="padding:0px 5px">
                  <span class="left">
                    <img
                      v-if="active==1"
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/ranking/cfen_icon@2x.png"
                    />

                    <img
                      v-else-if="active==0"
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/ranking/dfen_icon@2x.png"
                    >{{ranking_yin.code_b}}
                  </span>
                  <span
                    v-if="active == 0"
                    class="right"
                    @click="show_click_fabulous(ranking_yin)"
                  ><img
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/zan_selected@2x.png"
                    ><i style="color:#808080;font-style: normal">({{ranking_yin.BePraisedNmu}})</i></span>
                  <span
                    v-else-if="active == 1"
                    class="right"
                    @click="click_fabulous(ranking_yin)"
                  ><img
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/zan_selected@2x.png"
                    ><i style="color:#808080;font-style: normal">({{ranking_yin.BePraisedNmu}})</i></span>
                </div>
              </div>
            </van-col>
            <van-col
              span="6"
              style="margin:0px 15px;"
            >
              <div
                class="rank_box"
                style="height:125px;padding-top:5px;position:relative"
                v-if="ranking_jin.length!=0"
              >
                <span style="position:absolute;top:0px;right:0px"><img
                    style="width:15px;height:15px"
                    src="@/static/section/ranking/dengjihong x@2x.png"
                  ></span>
                <div class="ranking_jin">
                  <i
                    style="font-style: normal;margin-left: 2vw"
                    v-if="ranking_jin.name.length<3"
                  >{{((ranking_jin.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</i>
                  <i
                    style="font-style: normal;margin-left: 2vw"
                    v-else-if="ranking_jin.name.length>=3"
                  > {{((ranking_jin.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</i>
                </div>
                <div style="margin:6px 0px 9px;width:100%; display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ranking_jin.name}}({{ranking_jin.dingding_office_id}})</div>
                <div style="padding:0px 5px">
                  <span class="left">
                    <img
                      v-if="active==1"
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/ranking/cfen_icon@2x.png"
                    />

                    <img
                      v-else-if="active==0"
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/ranking/dfen_icon@2x.png"
                    >{{ranking_jin.code_b}}</span>
                  <span
                    v-if="active == 0"
                    class="right"
                    @click="show_click_fabulous(ranking_jin)"
                  ><img
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/zan_selected@2x.png"
                    ><i style="color:#808080;font-style: normal">({{ranking_jin.BePraisedNmu}})</i></span>
                  <span
                    v-else-if="active == 1"
                    class="right"
                    @click="click_fabulous(ranking_jin)"
                  ><img
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/zan_selected@2x.png"
                    ><i style="color:#808080;font-style: normal">({{ranking_jin.BePraisedNmu}})</i></span>
                </div>
              </div>
            </van-col>
            <van-col span="6">
              <div
                class="rank_box"
                v-if="ranking_tong.length!=0"
                style="position:relative"
              >
                <span style="position:absolute;top:0px;right:0px"><img
                    style="width:15px;height:15px"
                    src="@/static/section/ranking/dengjizi x@2x.png"
                  ></span>
                <div class="ranking_tong">
                  <i
                    style="font-style: normal;margin-left: 2vw"
                    v-if="ranking_tong.name.length<3"
                  >{{((ranking_tong.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</i>
                  <i
                    style="font-style: normal;margin-left: 2vw"
                    v-else-if="ranking_tong.name.length>=3"
                  >{{((ranking_tong.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</i>
                </div>
                <div style="margin:14px 0px 8px;width:100%; display:block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ranking_tong.name}}({{ranking_tong.dingding_office_id}})</div>
                <div style="padding:0px 5px">
                  <span class="left">
                    <img
                      v-if="active==1"
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/ranking/cfen_icon@2x.png"
                    />

                    <img
                      v-else-if="active==0"
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/ranking/dfen_icon@2x.png"
                    >{{ranking_tong.code_b}}</span>
                  <span
                    v-if="active == 0"
                    class="right"
                    @click="show_click_fabulous(ranking_tong)"
                  ><img
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/zan_selected@2x.png"
                    ><i style="color:#808080;font-style: normal">({{ranking_tong.BePraisedNmu}})</i></span>
                  <span
                    v-else-if="active == 1"
                    class="right"
                    @click="click_fabulous(ranking_tong)"
                  ><img
                      style="width:10px;height:10px;margin-right:5px"
                      src="@/static/section/zan_selected@2x.png"
                    ><i style="color:#808080;font-style: normal">({{ranking_tong.BePraisedNmu}})</i></span>
                </div>
              </div>
            </van-col>
          </van-row>
          <div
            class="ranking_list"
            v-if='myRank.length!=0'
          >
            <div class="clearfix">
              <div>
                <span
                  class="left"
                  style="margin-right:16px;"
                ><img
                    style="width:3px;height:11px"
                    src="@/static/section/ranking/dengjihong@2x.png"
                  ></span>
                <span
                  class="left"
                  style="margin-left:1px;"
                ><i>{{myRank.deep}}</i>
                </span>
                <span
                  class="item_title left"
                  v-if="myRank.name.length<3"
                >{{((myRank.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
                <span
                  class="item_title left"
                  v-else-if="myRank.name.length>=3"
                > {{((myRank.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
                <span class="left ellipsis"> {{myRank.name}}(<span style="width:100px">{{myRank.dingding_office_id}}</span>)
                </span>
              </div>
              <span class="right">
                <span style="width:50px;">
                  <img
                    v-if="active==1"
                    style="width:10px;height:10px;margin-right:5px"
                    src="@/static/section/ranking/cfen_icon@2x.png"
                  />

                  <img
                    v-else-if="active==0"
                    style="width:10px;height:10px;margin-right:5px"
                    src="@/static/section/ranking/dfen_icon@2x.png"
                  >{{myRank.code_b}}
                </span>
                <span style="width:50px;">
                  <img
                    style="width:10px;height:10px;margin-right:1px"
                    src="@/static/section/zan_default@2x.png"
                  >
                  <i style="color:#808080;font-style: normal">({{myRank.BePraisedNmu}})</i>
                </span>
              </span>
            </div>
          </div>
          <!-- 列表页 -->
          <div
            class="ranking_list"
            v-for="(item,i) in list"
            :key="i"
          >
            <div class="clearfix">
              <div>
                <span
                  class="left"
                  style="margin-right:16px;"
                ><img
                    style="width:3px;height:11px"
                    src="@/static/section/ranking/dengjicheng@2x.png"
                  ></span>
                <span
                  class="left"
                  style="margin-left:5px;"
                ><i>{{item.deep}}</i>
                </span>
                <span
                  class="item_title left"
                  v-if="item.name.length<3"
                >{{((item.name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
                <span
                  class="item_title left"
                  v-else-if="item.name.length>=3"
                > {{((item.name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
                <span class="left ellipsis"> {{item.name}}(<span>{{item.dingding_office_id}}</span>)
                </span>
              </div>
              <span class="right">
                <span style="width:50px;">
                  <img
                    v-if="active==1"
                    style="width:10px;height:10px;margin-right:5px"
                    src="@/static/section/ranking/cfen_icon@2x.png"
                  />

                  <img
                    v-else-if="active==0"
                    style="width:10px;height:10px;margin-right:5px"
                    src="@/static/section/ranking/dfen_icon@2x.png"
                  >{{item.code_b}}
                </span>
                <span
                  v-if="active == 0"
                  style="width:50px;"
                  @click="show_click_fabulous(item)"
                >
                  <img
                    style="width:10px;height:10px;margin-right:5px"
                    src="@/static/section/zan_selected@2x.png"
                  ><i style="color:#808080;font-style: normal">({{item.BePraisedNmu}})</i>
                </span>
                <span
                  v-else-if="active == 1"
                  style="width:50px;"
                  @click="click_fabulous(item)"
                >
                  <img
                    style="width:10px;height:10px;margin-right:5px"
                    src="@/static/section/zan_selected@2x.png"
                  ><i style="color:#808080;font-style: normal">({{item.BePraisedNmu}})</i>
                </span>
              </span>
            </div>
          </div>
        </van-pull-refresh>
      </div>

    </div>
    <div v-if="achievements==1">
      <p>敬请期待！</p>
    </div>
    <Plus />
  </div>
</template>

<script type="text/javascript">
import Plus from "@/components/plus";
import {
  Tab,
  Tabs,
  Icon,
  Popup,
  Cell,
  CellGroup,
  RadioGroup,
  Radio,
  Divider,
  DatetimePicker,
  Col,
  Row,
  DropdownMenu,
  DropdownItem,
  Button,
  Checkbox,
  CheckboxGroup,
  PullRefresh,
  Sticky,
  Overlay
} from "vant";
export default {
  data() {
    return {
      show_active: 0,
      show_dianzan: false,
      text_length: true,
      result_event_one: [],
      result_event_two: [],
      result_event_three: [],
      result_event_four: [],
      people: true,
      active: 0,
      event_time: true,
      month_time: true,
      phased_time: false,
      end_time: false,
      radio_D: 0,
      radio_C: 0,
      radio_event_D: 0,
      radio_event_C: 0,
      radio_stage: 0,
      myRank: [],
      list: [],
      ranking_jin: [],
      ranking_yin: [],
      ranking_tong: [],
      status: [
        {
          name: "月度排名",
          index: 1
        },
        {
          name: "阶段排名",
          index: 2
        },
        {
          name: "累计排名",
          index: 3
        }
      ],
      data_time: "",
      data_time_one: 0,
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date(),
      arr: [],
      item_list: [],
      integral_event_one: [],
      integral_event_two: [],
      integral_event_three: [],
      integral_event_four: [],
      integral_event_public: 0,
      ranking_list: [],
      default: [],
      office_id: 0,
      office_type: 4,
      integral_one_name: "",
      start_value: "开始时间",
      end_value: "结束时间",
      free_list: [],
      free_list_id: 0,
      C_name: "C分",
      D_name: "D分",
      achievements: 0,
      isLoading: false,
      free_eventName: [],
      defaultRanking: [],
      ISC: "",
      date_now: ""
    };
  },
  created() {
    this.getUserId();
    dd.biz.navigation.setTitle({
      title: "积分排名" //控制标题文本，空字符串表示显示默认文本
    });
  },
  beforeUpdate() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
  },
  components: {
    Plus,
    [Overlay.name]: Overlay,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Divider.name]: Divider,
    [DatetimePicker.name]: DatetimePicker,
    [Col.name]: Col,
    [Row.name]: Row,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [PullRefresh.name]: PullRefresh,
    [Sticky.name]: Sticky
  },
  methods: {
    /**
     *rfj
     */
    // 自定义名称存储
    async getCustomName() {
      // let corpId = this.$utils.getUrlKey("custid");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getCustomName?corpId=${corpId}`
      );
      if (res.data.errcode == "0000") {
        if (res.data.data.c_name == "") {
          localStorage.setItem("c_name", "C分");
        } else {
          localStorage.setItem("c_name", res.data.data.c_name);
        }
        if (res.data.data.d_name == "") {
          localStorage.setItem("d_name", "D分");
        } else {
          localStorage.setItem("d_name", res.data.data.d_name);
        }
      } else {
        localStorage.setItem("c_name", "C分");
        localStorage.setItem("d_name", "D分");
      }
    },
    // 获取用户信息
    async getUserId() {
      let Corp_Id = localStorage.getItem("custid");
      let User_Id = localStorage.getItem("userId");
      let corpId = this.$utils.getUrlKey("custid");
      if (corpId == null || corpId == "undefined") {
        corpId = Corp_Id;
      } else {
        localStorage.setItem("custid", corpId);
      }
      let code = "";
      var _this = this;
      if (User_Id && User_Id != "undefined" && User_Id != null) {
        if (Corp_Id != corpId) {
          await dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: function(result) {
              code = result.code;
            },
            onFail: function(err) {}
          });
          _this.$http
            .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
            .then(res => {
              localStorage.setItem("userId", res.data.data.dd_id);
              localStorage.setItem("custid", corpId);
              _this.getCustomName();
              _this.dataTime();
              _this.get_integral_Event();
              _this.getRanking();
              _this.getIsC();
            });
        } else {
          _this.getCustomName();
          _this.dataTime();
          _this.get_integral_Event();
          _this.getRanking();
          _this.getIsC();
        }
      } else {
        await dd.runtime.permission.requestAuthCode({
          corpId: corpId,
          onSuccess: function(result) {
            code = result.code;
          },
          onFail: function(err) {}
        });
        _this.$http
          .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
          .then(res => {
            localStorage.setItem("userId", res.data.data.dd_id);
            localStorage.setItem("custid", corpId);
            _this.getCustomName();
            _this.dataTime();
            _this.get_integral_Event();
            _this.getRanking();
            _this.getIsC();
          });
      }
    },
    //C分开关
    async getIsC() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/getIsC?corpId=${corpId}`);
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code;
    },
    //下拉刷新
    onRefresh() {
      const tab = this.active;
      if (tab == 1) {
        // setTimeout(() => {
        this.isLoading = false;
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          2,
          this.date_now
        );
        // }, 0);
        this.achievements = 0;
      } else if (tab == 0) {
        // setTimeout(() => {
        this.isLoading = false;
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          1,
          this.date_now
        );
        // }, 0);
      }
    },
    // 时间取消按钮
    show_cancel() {
      if (this.active == 0) {
        this.$refs.D_item.toggle();
        this.currentDate = new Date();
        this.data_time= this.date_now;
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          1,
          this.date_now,
          this.free_eventName
        );
      }
      if (this.active == 1 || this.active == 2) {
        this.currentDate = new Date();
          this.data_time= this.date_now;
        this.$refs.rangking_date_c.toggle();
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          2,
          this.date_now,
          this.free_eventName
        );
      }
    },
    // D分点赞
    async show_click_fabulous(it) {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      let desc = `${it.deep},${it.code_b},${this.integral_one_name}`;
      const res = await this.$http.get(
        `/yuepoints/sendPraise?corpId=${corpId}&userId=${userId}&praisedPerson=${it.dd_id}&taggingLabel=排名点赞&type=2&balance=0&desc=${desc}`
      );
      if (res.data.errcode == "0000") {
        if (it.dd_id != userId) {
          this.show_dianzan = true;
        }
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          1,
          this.data_time,
          this.free_eventName
        );
        // this.show_dianzan=false;
      } else {
        this.$toast(res.data.errmsg);
      }
    },
    // C分点赞
    async click_fabulous(it) {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      let desc = `${it.deep},${it.code_b},${this.integral_one_name}`;
      const res = await this.$http.get(
        `/yuepoints/sendPraise?corpId=${corpId}&userId=${userId}&praisedPerson=${it.dd_id}&taggingLabel=排名点赞&type=2&balance=0&desc=${desc}`
      );
      if (res.data.errcode == "0000") {
        if (it.dd_id != userId) {
          this.show_dianzan = true;
        }
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          2,
          this.data_time,
          this.free_eventName
        );
      } else {
        this.$toast(res.data.errmsg);
      }
    },
    // 自定义部门排名
    async show_office_free(it) {
      this.free_list_id = 1;
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/computingRanking?corpId=${corpId}&userId=${userId}&officeId=${it.groupId}&type=${it.groupType}&rankType=1&codeType=1&monthly=${this.data_time}`
      );
      this.free_list = res.data.data;
      this.$refs.depart_D.toggle();
    },
    // 部门点击事件
    show_office(it) {
      this.free_list_id = 0;
      this.office_type = it.groupType;
      this.office_id = it.groupId;
      this.$refs.depart_D.toggle();
      if (this.active == 0) {
        if (this.radio_stage == 1) {
          this.stage(
            it.groupId,
            it.groupType,
            this.start_value,
            this.end_value,
            this.free_eventName
          );
        } else {
          this.computingRanking(
            it.groupId,
            it.groupType,
            1,
            1,
            this.data_time,
            this.free_eventName
          );
        }
      } else if (this.active == 1) {
        this.computingRanking(
          it.groupId,
          it.groupType,
          1,
          2,
          this.data_time,
          this.free_eventName
        );
      }
    },
    // 部门事件类型
    async getRanking() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        //  `yuepoints/Ranking?corpId=ding4a8778ae13049c4635c2f4657eb6378f&userId=055918012131021480`
        `yuepoints/Ranking?corpId=${corpId}&userId=${userId}`
      );
      const {
        data: { data }
      } = res;
      this.ranking_list = data;
    },
    // 积分取消事件
    integral_confirm() {
      if (this.active == 0) {
        this.radio_event_D = 0;
        this.result_event_two = [];
        this.result_event_three = [];
        this.result_event_four = [];
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          1,
          this.data_time
        );
        this.$refs.integral_event_d.toggle();
      }
      if (this.active == 1) {
        this.radio_event_C = 0;
        this.result_event_two = [];
        this.result_event_three = [];
        this.result_event_four = [];
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          2,
          this.data_time
        );
        this.$refs.integral_event_c.toggle();
      }
    },
    // 积分确定事件
    onConfirm() {
      let arr = {};
      let js = this.integral_event_two.event;
      if (this.integral_one_name != "") {
        arr = { one: [this.integral_one_name] };
      } else {
        this.$toast("请选中对应等级的父级事件!");
        return false;
      }
      if (this.result_event_two.length != 0) {
        arr = { one: [this.integral_one_name], two: this.result_event_two };
      }
      if (this.result_event_three != 0) {
        if (this.result_event_two == 0) {
          this.$toast("请选中对应等级的父级事件!");
          return false;
        } else {
          arr = {
            one: [this.integral_one_name],
            two: this.result_event_two,
            three: this.result_event_three
          };
        }
      }
      if (this.result_event_four.length != 0) {
        if (this.result_event_two == 0 || this.result_event_three == 0) {
          this.$toast("请选中对应等级的父级事件!");
          return false;
        } else {
          arr = {
            one: [this.integral_one_name],
            two: this.result_event_two,
            three: this.result_event_three,
            four: this.result_event_four
          };
        }
      }
      for (let i = 0; i < js.length; i++) {
        // 三级事件
        if (js[i]["event"] != undefined) {
          for (let j = 0; j < js[i].event.length; j++) {
            if (this.result_event_three.indexOf(js[i].event[j].name) > -1) {
              if (this.result_event_two.indexOf(js[i].name) <= -1) {
                this.$toast("请选中对应等级的父级事件!");
                return false;
              }
            }
            // 四级事件
            if (js[i].event[j].event != undefined) {
              for (let k = 0; k < js[i].event[j].event.length; k++) {
                if (
                  this.result_event_four.indexOf(js[i].event[j].event[k].name) >
                  -1
                ) {
                  if (
                    this.result_event_three.indexOf(js[i].event[j].name) <= -1
                  ) {
                    this.$toast("请选中对应等级的父级事件!");
                    return false;
                  }
                }
              }
            }
          }
        }
      }

      if (this.active == 0) {
        this.free_eventName = JSON.stringify(arr);
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          1,
          this.data_time,
          JSON.stringify(arr)
        );
        this.$refs.integral_event_d.toggle();
      }
      if (this.active == 1) {
        this.free_eventName = JSON.stringify(arr);
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          2,
          this.data_time,
          JSON.stringify(arr)
        );
        this.$refs.integral_event_c.toggle();
      }
    },
    // 积分三级事件操作
    async show_click_three_event(it) {
      this.integral_event_four = it.event;
    },
    // 积分二级事件类型点击
    async show_click_two_event(it) {
      this.integral_event_four = [];
      this.integral_event_three = it.event;
      if (it.event != undefined) {
        this.integral_event_four = it.event[0]["event"];
      }
    },
    // 积分一级事件类型点击事件
    show_click_one_event(it) {
      this.result_event_two = [];
      this.result_event_three = [];
      this.result_event_four = [];
      this.integral_event_three = [];
      this.integral_event_four = [];
      this.integral_event_two = it;
      if (it.event[0]["event"] != undefined) {
        this.integral_event_three = it.event[0]["event"];
        if (it.event[0].event[0]["event"] != undefined) {
          this.integral_event_four = it.event[0].event[0]["event"];
        }
      }
      this.integral_one_name = it.name;
    },
    // 积分事件类型默认展示
    async get_integral_Event() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/EventTree?corpId=${corpId}`);
      const {
        data: { event }
      } = res.data;
      this.integral_event_one = event;
      if (event[0].event) {
        this.integral_event_two = event[0];
        if (event[0].event[0]["event"] != undefined) {
          this.integral_event_three = event[0].event[0]["event"];
          if (event[0].event[0].event[0]["event"] != undefined) {
            this.integral_event_four = event[0].event[0].event[0]["event"];
          }
        }
      }
    },
    // D分累计排名
    show_cumulative() {
      this.computingRanking(
        this.office_id,
        this.office_type,
        3,
        1,
        "",
        this.free_eventName
      );
      this.$refs.D_item.toggle();
    },
    // D分和C分月度排名
    show_time(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = yy + "-" + mm;
      this.data_time = resDate;
      if (this.active == 0) {
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          1,
          resDate,
          this.free_eventName
        );
        this.$refs.D_item.toggle();
      }
      if (this.active == 1) {
        this.computingRanking(
          this.office_id,
          this.office_type,
          1,
          2,
          resDate,
          this.free_eventName
        );
        this.$refs.rangking_date_c.toggle();
      }
    },
    // D阶段排名标记开始和结束时间的选中
    show_end_value() {
      this.show_active = 1;
      this.data_time_one = 1;
    },
    show_start_value() {
      this.show_active = 0;
      this.data_time_one = 0;
    },
    // 阶段排名校验
    show_section_value(picker) {
      let startTime = picker.getValues();
      if (this.data_time_one == 0) {
        this.start_value =
          startTime[0] + "-" + startTime[1] + "-" + startTime[2];
      }
      if (this.data_time_one == 1) {
        this.end_value = startTime[0] + "-" + startTime[1] + "-" + startTime[2];
        if (this.start_value > this.end_value) {
          this.$toast("结束时间不能小于开始时间");
        }
      }
    },
    // D分时间阶段排名
    show_time_section() {
      this.stage(
        this.office_id,
        this.office_type,
        this.start_value,
        this.end_value,
        this.free_eventName
      );
      this.$refs.D_item.toggle();
    },
    // 阶段排名展示
    async stage(office_id, office_type, start_value, end_value, eventName) {
      if (eventName == undefined) {
        eventName = "";
      }
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/computingRanking?corpId=${corpId}&userId=${userId}&officeId=${office_id}&type=${office_type}&rankType=2&codeType=1&startYm=${start_value}&endYm=${end_value}&eventName=${eventName}`
      );
      const {
        data: { myRank, rank, FirstThree }
      } = res.data;
      this.myRank = myRank;
      this.list = rank;
      if (FirstThree != undefined && FirstThree.length == 3) {
        this.text_length = true;
        for (let i = 0; i < FirstThree.length; i++) {
          if (
            FirstThree[0].deep == FirstThree[1].deep ||
            FirstThree[0].deep == FirstThree[2].deep ||
            FirstThree[1].deep == FirstThree[2].deep
          ) {
            if (i == 0) {
              this.ranking_jin = FirstThree[i];
            }
            if (i == 1) {
              this.ranking_yin = FirstThree[i];
            }
            if (i == 2) {
              this.ranking_tong = FirstThree[i];
            }
          } else {
            if (FirstThree[i].deep == 1) {
              this.ranking_jin = FirstThree[i];
            }
            if (FirstThree[i].deep == 2) {
              this.ranking_yin = FirstThree[i];
            }
            if (FirstThree[i].deep == 3) {
              this.ranking_tong = FirstThree[i];
            }
          }
        }
      } else if (FirstThree != undefined && FirstThree.length == 2) {
        this.text_length = true;
        for (let i = 0; i < FirstThree.length; i++) {
          if (FirstThree[0].deep == FirstThree[1].deep) {
            if (i == 0) {
              this.ranking_jin = FirstThree[i];
            }
            if (i == 1) {
              this.ranking_yin = FirstThree[i];
            }
          } else {
            if (FirstThree[i].deep == 1) {
              this.ranking_jin = FirstThree[i];
            }
            if (FirstThree[i].deep == 2) {
              this.ranking_yin = FirstThree[i];
            }
          }
        }
      } else if (FirstThree != undefined && FirstThree.length == 1) {
        this.ranking_jin = FirstThree;
        this.text_length = true;
      } else {
        this.text_length = false;
      }
    },
    // 当前时间
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = this.p(new Date().getMonth() + 1);
      let dd = this.p(new Date().getDate());
      let year = yy + "-" + mm;
      let date = yy + "-" + mm + "-" + dd;
      this.date_now = year;
      this.data_time = year;
      this.start_value = date;
      this.end_value = date;
      this.computingRanking(
        this.office_id,
        this.office_type,
        1,
        1,
        year,
        this.free_eventName
      );
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    // tab栏切换
    showTab() {
      const tab = this.active;
      if (tab == 1) {
        this.radio_C = 0;
        this.radio_event_C = 0;
        this.currentDate = new Date();
        this.result_event_two = [];
        this.result_event_three = [];
        this.result_event_four = [];
        this.computingRanking(0, 4, 1, 2, this.date_now);
        if (this.ISC == 1) {
          this.achievements = 0;
        } else {
          this.achievements = 1;
        }
      } else if (tab == 0) {
        this.radio_D = 0;
        this.radio_event_D = 0;
        this.currentDate = new Date();
        this.result_event_two = [];
        this.result_event_three = [];
        this.result_event_four = [];
        this.achievements = 0;
        this.computingRanking(0, 4, 1, 1, this.date_now);
      } else if (tab == 2) {
        this.achievements = 1;
      }
    },
    // 排名列表默认展示
    async computingRanking(office_id, type, ranking, i, month, name_id) {
      if (name_id == undefined) {
        name_id = "";
      }
      if (ranking == undefined) {
        ranking = "";
      }
      if (i == undefined) {
        i = "";
      }
      if (month == undefined) {
        month = "";
      }

      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/computingRanking?corpId=${corpId}&userId=${userId}&officeId=${office_id}&type=${type}&rankType=${ranking}&codeType=${i}&monthly=${month}&eventName=${name_id}`
      );
      const {
        data: { myRank, rank, FirstThree },
        errcode
      } = res.data;
      if (errcode == "0000") {
        this.show_dianzan = false;
        this.myRank = myRank;
        this.list = rank;
        if (FirstThree != undefined && FirstThree.length == 3) {
          this.text_length = true;
          for (let i = 0; i < FirstThree.length; i++) {
            if (
              FirstThree[0].deep == FirstThree[1].deep ||
              FirstThree[0].deep == FirstThree[2].deep ||
              FirstThree[1].deep == FirstThree[2].deep
            ) {
              if (i == 0) {
                this.ranking_jin = FirstThree[i];
              }
              if (i == 1) {
                this.ranking_yin = FirstThree[i];
              }
              if (i == 2) {
                this.ranking_tong = FirstThree[i];
              }
            } else {
              if (FirstThree[i].deep == 1) {
                this.ranking_jin = FirstThree[i];
              }
              if (FirstThree[i].deep == 2) {
                this.ranking_yin = FirstThree[i];
              }
              if (FirstThree[i].deep == 3) {
                this.ranking_tong = FirstThree[i];
              }
            }
          }
        } else if (FirstThree != undefined && FirstThree.length == 2) {
          this.text_length = true;
          for (let i = 0; i < FirstThree.length; i++) {
            if (FirstThree[0].deep == FirstThree[1].deep) {
              if (i == 0) {
                this.ranking_jin = FirstThree[i];
              }
              if (i == 1) {
                this.ranking_yin = FirstThree[i];
              }
            } else {
              if (FirstThree[i].deep == 1) {
                this.ranking_jin = FirstThree[i];
              }
              if (FirstThree[i].deep == 2) {
                this.ranking_yin = FirstThree[i];
              }
            }
          }
        } else if (FirstThree != undefined && FirstThree.length == 1) {
          this.ranking_jin = FirstThree;
          this.text_length = true;
        } else {
          this.text_length = false;
        }
      } else {
        this.show_dianzan = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 13px;
  padding-bottom: 50px;
  background: #f8f8fa;
  .dianzan_round {
    -webkit-animation: it_round 1s 1 ease-in-out;
    animation: it_round 1s 1 ease-in-out;
  }
  @-webkit-keyframes it_round {
    from {
      transform: scale(1.2);
    }
    to {
      transform: none;
    }
  }
  @keyframes it_round {
    from {
      transform: scale(1.2);
    }
    to {
      transform: none;
    }
  }
  .dianzan_rotate {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation: dian_zan 2s 1 ease;
    animation: dian_zan 2s 1 ease;
  }
  @-webkit-keyframes dian_zan {
    0% {
      -webkit-transform: perspective(800px) rotateY(180deg) scale(1);
      transform: perspective(800px) rotateY(180deg) scale(1);
    }
    20% {
      -webkit-transform: perspective(800px) rotateY(0deg) scale(1.3);
      transform: perspective(800px) rotateY(0deg) scale(1.3);
    }
    // 50% {
    //   -webkit-transform: perspective(800px) rotateY(180deg) scale(1);
    //   transform: perspective(800px) rotateY(180deg) scale(1);
    // }
    75% {
      -webkit-transform: perspective(800px) rotateY(0deg) scale(0.3);
      transform: perspective(800px) rotateY(0deg) scale(0.3);
    }
    // from {
    //   transform: rotate(90deg) translateX(30px);
    // }
    // to {
    //   transform: none;
    // }
  }
  @keyframes dian_zan {
    0% {
      -webkit-transform: perspective(800px) rotateY(180deg) scale(1);
      transform: perspective(800px) rotateY(180deg) scale(1);
    }
    20% {
      -webkit-transform: perspective(800px) rotateY(0deg) scale(1.3);
      transform: perspective(800px) rotateY(0deg) scale(1.3);
    }
    // 50% {
    //   -webkit-transform: perspective(800px) rotateY(180deg) scale(1);
    //   transform: perspective(800px) rotateY(180deg) scale(1);
    // }
    75% {
      -webkit-transform: perspective(800px) rotateY(0deg) scale(0.3);
      transform: perspective(800px) rotateY(0deg) scale(0.3);
    }
    //  from {
    //     -webkit-transform: perspective(800px) rotateY(180deg);
    //     transform: perspective(800px) rotateY(180deg);
    //   }
    //   to {
    //     -webkit-transform: perspective(800px) rotateY(0deg);
    //     transform: perspective(800px) rotateY(0deg);
    //   }
    // from {
    //   transform: rotate(90deg) translateX(30px);
    // }
    // to {
    //   transform: none;
    // }
  }
  // .dianzan_rotate {
  //   -webkit-animation-delay: 2s;
  //   animation-delay: 2s;
  //   -webkit-animation: dian_zan 0.7s infinite ease-in-out;
  //   animation: dian_zan 0.7s infinite ease-in-out;
  // }
  // @-webkit-keyframes dian_zan {
  //   from,0% {
  //     transform: rotate(-30deg) translateX(0px);
  //     transform-origin: left bottom;
  //   }
  //   10% {
  //     transform: rotate(-8deg) translateX(0px);
  //   }
  //   35% {
  //     transform: rotate(-30deg) translateX(0px);
  //     transform-origin: left bottom;
  //   }
  //   45% {
  //     transform: rotate(-8deg) translateX(0px);
  //   }
  //    65% {
  //     transform: rotate(-30deg) translateX(0px);
  //     transform-origin: left bottom;
  //   }
  //   85%,to {
  //     transform: rotate(-8deg) translateX(0px);
  //   }
  //   // from {
  //   //   transform: rotate(-30deg) translateX(0px);
  //   //   transform-origin: left bottom;
  //   // }
  //   // to {
  //   //   transform: rotate(-8deg) translateX(0px);
  //   // }
  // }
  // @keyframes dian_zan {
  //   from {
  //     transform: rotate(-30deg) translateX(0px);
  //     transform-origin: left bottom;
  //   }
  //   to {
  //     transform: rotate(-8deg) translateX(0px);
  //   }
  // }
  .van-overlay {
    z-index: 3;
    background-color: #00000000;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  /deep/.van-sticky--fixed {
    z-index: 1;
  }
  /deep/ .van-col--6 {
    width: 28%;
  }
  /deep/ .van-tab {
    font-size: 16px !important;
  }
  .free_public {
    padding: 0px 10px 0px 0px !important;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 4px 0px rgba(0, 42, 105, 0.05);
    border-radius: 30px;
    margin: 5px 10px !important;
  }
  .rangking_condition {
    margin-top: 10px;
    li {
      width: 80px;
      padding: 5px;
    }
  }
  .rangking_condition_date {
    width: 76vw;
    /deep/ .van-picker__cancel,
    /deep/.van-picker__confirm {
      width: 36vw;
      height: 5vh !important;
      line-height: 5vh;
      background-size: cover;
      margin-right: 5px;
      border-radius: 5px;
    }
    /deep/.van-picker,
    /deep/ .van-datetime-picker {
      position: relative;
      padding-bottom: 5vh;
      /deep/.van-picker__toolbar {
        padding: 0px 5px;
        position: absolute;
        z-index: 11;
        top: 220px;
        height: 5vh;
      }
    }
  }
  .rangking_condition1_date {
    width: 76vw;
    .van-cell-group {
      display: inline-block;
      width: 100px;
      background: #f2f2f2;
      border-radius: 10px;
      margin: 10px 15px;
      padding: 5px;
      font-size: 11px;
    }
    .van-cell-show {
      display: inline-block;
      width: 100px;
      background: #4eb5ff;
      border-radius: 10px;
      margin: 10px 15px;
      padding: 5px;
      font-size: 11px;
      color: #fff;
    }
    /deep/ .van-picker__cancel,
    /deep/.van-picker__confirm {
      width: 36vw;
      line-height: 5vh;
      height: 5vh !important;
      background-size: cover;
      margin-right: 5px;
      border-radius: 5px;
    }
    /deep/.van-picker,
    /deep/ .van-datetime-picker {
      position: relative;
      padding-bottom: 5vh;
      /deep/.van-picker__toolbar {
        padding: 0px 5px;
        position: absolute;
        z-index: 11;
        top: 220px;
        height: 5vh;
      }
    }
  }
  /deep/ .van-dropdown-menu {
    background: #f8f8fa;
  }
  i {
    font-style: normal;
  }
  /deep/ [class*="van-hairline"]::after {
    border: none;
  }
  /deep/ .van-button {
    width: 49vw;
    height: 5vh;
    line-height: 5vh;
  }
  .public_reset {
    box-shadow: 0px 4.5px 2px 0px rgba(0, 42, 105, 0.05);
    border-bottom: 1px solid #c0c0c08c;
    border: none;
  }
  .public_confirm {
    color: #fff;
    background: linear-gradient(
      45deg,
      rgba(74, 172, 249, 1) 33%,
      rgba(127, 214, 255, 1) 100%
    );
    border: none;
  }
  .rangking_list {
    margin: 0px auto 10px;
    background: #ecf9ff;
    font-size: 13px;
    padding: 5px 0px;
  }
  .cell {
    text-align: left;
    font-size: 12px;
  }
  /deep/ .van-radio__label {
    padding-bottom: 8px;
    font-size: 13px;
  }
  /deep/ .van-picker__cancel {
    color: #000;
    box-shadow: 0px 4.5px 5px 5px rgba(0, 42, 105, 0.05);
    border-bottom: 1px solid #c0c0c08c;
    border: none;
    width: 48vw;
    height: 5vh;
  }
  /deep/.van-picker__confirm {
    color: #fff;
    background: linear-gradient(
      45deg,
      rgba(74, 172, 249, 1) 33%,
      rgba(127, 214, 255, 1) 100%
    );
    border: none;
    width: 48vw;
    height: 5vh;
  }
  /deep/ .van-datetime-picker {
    padding-bottom: 5vh;
  }
  // /deep/.van-popup--top{
  //   position: relative;
  /deep/ .van-picker__toolbar {
    padding: 0px 5px;
    position: absolute;
    z-index: 11;
    bottom: 0px;
    height: 5vh;
    line-height: 5vh;
  }
  // }
  /deep/ [class*="van-hairline"]::after {
    border: none;
  }
  /deep/ .van-dropdown-item__content {
    max-height: 65%;
  }
  /deep/ .van-ellipsis {
    font-size: 14px;
  }

  .integral_oneEvent {
    text-align: left;
    font-size: 13px;
    width: 32vw;
    word-break: break-all;
    .integral_one_children {
      padding: 6px 3px;
      position: relative;
      .integral_children_right {
        position: absolute;
        bottom: 0px;
        right: 6px;
      }
      .integral_childre_one {
        position: absolute;
        bottom: 0px;
        right: 6px;
        margin-bottom: 5px;
      }
    }
  }
  /deep/ .van-checkbox__icon .van-icon {
    border-radius: 5px !important;
    font-size: 13px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin-left: 2px;
  }
  /deep/ .van-radio__icon .van-icon {
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 5px;
    font-size: 13px;
  }
  .rank_box {
    font-size: 11px;
    height: 115px;
    background: rgba(255, 255, 255, 1);
    padding-top: 10px;
    box-shadow: 0px 9px 4px 0px rgba(0, 42, 105, 0.05);
    border-radius: 10px;
    .ranking_yin {
      background: url("../static/section/ranking/yincrown_default@2x.png")
        no-repeat;
      background-size: cover;
      width: 48px;
      height: 62px;
      line-height: 84px;
      color: #fff;
      margin: 0px auto;
    }
    .ranking_jin {
      background: url("../static/section/ranking/jincrown_default@2x.png")
        no-repeat;
      background-size: cover;
      width: 59px;
      height: 77px;
      line-height: 104px;
      color: #fff;
      margin: 0px auto;
    }
    .ranking_tong {
      background: url("../static/section/ranking/tongcrown_default@2x.png")
        no-repeat;
      background-size: cover;
      width: 45px;
      height: 57px;
      line-height: 80px;
      color: #fff;
      margin: 4px auto;
    }
  }

  /deep/ .van-icon-calender-o {
    font-size: 20px;
    vertical-align: middle;
    color: dodgerblue;
  }
  /deep/ .van-divider::after,
  /deep/ .van-divider::before {
    border-width: 3px 0px 0px !important;
    border-color: rgb(192, 192, 192);
  }
  /deep/ .van-divider {
    margin: 5px 0px !important;
    font-size: 16px;
  }
  .ranking_list,
  .free_public {
    text-align: left;
    height: 50px;
    line-height: 50px;
    background: #fff;
    padding: 0px 10px;
    margin: 10px 0px;
    .item_title {
      display: inline-block;
      width: 35px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: url("../static/section/Avatar_default@2x.png") no-repeat;
      background-size: contain;
      color: #fff;
      font-size: 11px;
      margin: 8px 10px;
    }
  }
  .ellipsis {
    width: 35vw;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
